<template>
  <div>
    <div class="Post-info">
      <img
        v-if="Comdata.user.head_img"
        :src="$axios.defaults.baseURL+Comdata.user.head_img"
        alt
        class="headImg"
      />
      <img v-else src="@/assets/logo.png" alt class="headImg" />
      <div class="userInfo">
        <p class="nickname">{{Comdata.user.nickname}}</p>
        <span class="date">{{Comdata.user.create_date.split("T")[0]}}</span>
      </div>
      <div class="BtnReply" @click="SendParentId">回复</div>
    </div>
    <Parent @btnCallReply="BtnReply" :parent="Comdata.parent" v-if="Comdata.parent"></Parent>
    <div class="comment">{{Comdata.content}}</div>
  </div>
</template>
<script>
import Parent from "@/views/comments/parent.vue";
export default {
  props: ["Comdata"],
  components: {
    Parent
  },
  methods: {
    SendParentId() {
      this.$emit("SendParentId", this.Comdata.id, this.Comdata.user.nickname);
    },
    BtnReply(id, nickname) {
      this.$emit("SendParentId", id, nickname);
    }
  }
};
</script>
<style lang="less" scoped>
.comment {
  padding: 16px;
  border-bottom: 1px solid #e4e4e4;
}
.Post-info {
  padding: 22px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headImg {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: pink;
  }
  .userInfo {
    flex: 1;
    padding-left: 10px;
    .nickname {
      font-size: 14px;
    }
    .date {
      font-size: 12px;
      color: #888;
    }
  }
  .BtnReply {
    font-size: 12px;
    color: #888;
  }
}
</style>